 <template>
   <view>
     <view class="container" v-if="!isPost">
       <view class="example">
         <uni-forms ref="form" :modelValue="personnel" :rules="rules">
         	<uni-forms-item label="标题" name="title" required>
         		<uni-easyinput type="text" v-model="personnel.title" placeholder="请输入标题" />
         	</uni-forms-item>
           <uni-forms-item label="需要人数" name="peoplenum" required>
           	<uni-easyinput type="text" v-model="personnel.peoplenum" placeholder="请输入参与人数" />
           </uni-forms-item>
           <uni-forms-item label="类别" name="session" required>
           	<!-- multiple y有这个属性是多选 没有单选 -->
           	<uni-data-checkbox selectedColor="#FF8141" selectedTextColor="#FF8141" v-model="personnel.session" :localdata="sessionData" @change="handleSessionValue" />
           </uni-forms-item>
         	<uni-forms-item label="内容" name="content" required>
         		<uni-easyinput type="textarea" v-model="personnel.content" placeholder="请输入内容" />
         	</uni-forms-item>
           <uni-forms-item label="地点" name="address" required>
           	<uni-easyinput type="text" v-model="personnel.address" placeholder="请输入活动地点" />
           </uni-forms-item>
           <uni-forms-item label="微信号" name="relation" required>
           	<uni-easyinput type="text" v-model="personnel.relation" placeholder="请输入联系方式" />
           </uni-forms-item>
           <uni-forms-item label="活动时间" name="date" required="true">
             <uni-datetime-picker :start="Date.now()" type="datetime" v-model="datetimesingle" hide-second="true" placeholder="选择活动时间" border="false"/>
           </uni-forms-item>
         </uni-forms>
       </view>
     	<button type="primary" :loading="loading" class="submins" @click="submitForm">提交</button>
     	</form>
     </view>
     <!-- 发布成功 -->
     <view class="post-success" v-else>
       <view class="post-success-index">
         <image src="https://s2.loli.net/2022/05/21/QJNgspY8Tc9nrzl.png" mode=""></image>
         <text>发布成功</text>
       </view>
       <view class="post-success-button">
         <button type="default" @click="gotoPostItem">查看详情</button>
         <button type="default" @click="goBack">返回</button>
       </view>
     </view>
   </view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
        //下拉框
        value: 0,
              range: [  
                { value: 0, text: "篮球" },
                { value: 1, text: "足球" },
                { value: 2, text: "游泳" },
              ],
        isPost: false,//是否发布
        taskId: '',//任务id
				loading: false,
				tabList: [],
				token: '',
				name: '',
				hobby: '男',
        datetimesingle: Date.now(),
				sexData: [{
						value: 0,
						text: "男",
					},
					{
						value: 1,
						text: "女",
					},
          {
          	value: 2,
          	text: '保密'
          }
				],
        sessionData: [{
        		value: 0,
        		text: "运动",
        	},
        	{
        		value: 1,
        		text: "学习",
        	},
          {
          	value: 2,
          	text: '生活'
          }
        ],
				personnel: {
					title: '',
          content: '',
					sex: '',
          session: '',
          peoplenum: '',
          datetime: '',
          relation: '',
          address: ''
				},
				rules: {
					title: {
						rules: [{
								required: true,
								errorMessage: '请输入标题',
							},
							{
								minLength: 2,
								maxLength: 20,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					peoplenum: {
						rules: [{
							required: true,
							errorMessage: '请输入人数，人数最多只能8人噢！',
						},{
              minimum: 1,
              maximum: 8,
              errorMessage: '人数只能{minimum}--{maximum}'
            },
            {
              format: 'number',
              errorMessage: '请输入数字'
            }
            ]
					},
					relation: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式',
						}]
					},
          session: {
          	rules: [{
          		required: true,
          		errorMessage: '请选择分类',
          	}]
          },
					content: {
						rules: [{
							required: true,
							errorMessage: '请输入内容',
						},
            {
            	minLength: 5,
            	maxLength: 120,
            	errorMessage: '内容长度在 {minLength} 到 {maxLength} 个字符'
            }]
					},
          address: {
          	rules: [{
          		required: true,
          		errorMessage: '请输入地点',
          	}]
          },
          date: {
            rules: [{
              required: true,
              errorMessage: '请输入日期',
            }]
          }
				}
			}
		},
    watch: {
      datetimesingle(newval) {
      				console.log('单选:', this.datetimesingle);
      },
    },
		created() {
			
		},
		computed: {

		},
    mounted(){
      
    },
		methods: {
			// 性别
      ...mapMutations('postitem_module',['addPostItem','updatePostItem','updateIsDot']),
    change(e) {
          console.log("e:", e);
        },
      goBack() {
        uni.switchTab({
          url: '../../pages/message/message'
        })
      },
      gotoPostItem() {
        uni.navigateTo({
          url: '../postitem/postitem?id=' + this.taskId
        })
      },
			handleSexValue(e) {
				console.log("数据", e)
				this.personnel.sex = e.detail.value
			},
      handleSessionValue(e) {
        this.personnel.session = e.detail.value
      },
			// 提交按钮
			submitForm() {
				this.$refs.form.validate().then(res => {
          console.log(res)
          if(!res.date) return uni.$showMsg('请输入活动时间！')
          if(!(res.date.indexOf('-') !== -1 && res.date.indexOf(':') !== -1)) return uni.$showMsg('请选择具体活动时间！')
          const query = {
            title: res.title,
            num: res.peoplenum,
            content: res.content,
            relation: res.relation,
            address: res.address,
            catId: res.session,
            beginTime: res.date + ':00'
          }
          uni.$http.post('/api/task/release',query).then(res => {
           if(res.statusCode !== 200) return uni.$showMsg('服务器忙，请稍后重试！')
           uni.$http.post('/api/task/getRelease').then(res1 => {
             this.isPost = true
             const results = res1.data.data.message.reverse()
             this.taskId = results[0].serialNumber
             this.updatePostItem(results)
             this.updateIsDot(true)
           }).catch(err => uni.$showMsg('网络错误！'))
          }).catch(err => uni.$showMsg('网络错误！'))
				}).catch(err => err)
			},
		}
	}
</script>
<style lang="scss">
  .example {
  		padding: 35px 20px;
  		// background-color: #fff;
  	}
  
  	.button {
  		display: flex;
  		align-items: center;
  		height: 35px;
  		margin-left: 10px;
      // background-color: #FCFCF3;
      // border: 1px solid #E56D00;
  	}
    
    .submins {
      width: 250px;
    }
    
    .example-body {
    		background-color: #fff;
    		padding: 10px;
    	}
      //发布成功后
    .post-success {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 40%;
      .post-success-index {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        image {
          width: 100px;
          height: 100px;
        }
        text {
          font-size: 18px;
          font-weight: 700;
        }
      }
      .post-success-button {
        display: flex;
        justify-content: center;
        align-items: center;
        button {
          background-color: #FCFCF3;
          border: 1px solid #E56D00;
          width: 110px;
          font-size: 16px;
          margin: 0 10px;
        }
      }
    }
</style>
